<template>
    <div class="cm-bg-c">
        <div class="updoc-status" v-if="status === 1">
            <img class="tip-img" src="@/assets/imgs/sys/pay-updoc-auth.png" />
            <span class="tip-status">审核中</span>
            <span class="tip-text">商户号：98683965&nbsp;&nbsp;&nbsp;&nbsp;商户简称：珊瑚文化</span>
        </div>
        <div class="updoc-status" v-if="status === 2">
            <img class="tip-img" src="@/assets/imgs/sys/pay-updoc-fail.png" />
            <span class="tip-status">审核失败</span>
            <div class="tip-text">
                您提交的资料有误，请修改后再次提交！
                <el-popover placement="right" :width="200" trigger="hover" popper-class="updoc-popper">
                    <template #default>
                        <div class="ul">
                            <span class="li">·企业名称和对公账户名称不一致</span>
                            <span class="li">·证件信息已存在</span>
                            <span class="li">·绑定卡已存在</span>
                        </div>
                    </template>
                    <template #reference>
                        <span class="err-info">查看错误信息</span>
                    </template>
                </el-popover>
            </div>
            <el-button type="primary" @click="submitHandler">返回修改</el-button>
        </div>
        <div class="updoc-success">
            <el-row>
                <el-col :span="12">
                    <el-descriptions :column="1">
                        <el-descriptions-item label="企业名称：" label-align="right" width="200px">
                            <span class="cell-item">{{ entObj.merchantName }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="登录号：" label-align="right" width="200px">
                            <span class="cell-item">{{ entObj.loginNo }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item riptions-item label="客户账户号：" label-align="right" width="200px">
                            <span class="cell-item">{{ entObj.contractNo || '' }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="SIMID：" label-align="right" width="200px">
                            <span class="cell-item">{{ entObj.SIMID || '' }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="报备状态：" label-align="right" width="200px">
                            <span class="cell-item cell-special">已通过待签约</span>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
            <div class="qrcode-wrapper">
                <img class="qrcode" :src="qrcode" alt="" />
                <p>请扫二维码进行微信支付端签约认证</p>
            </div>
            <el-button type="primary" @click="confirmHandler">认证完成</el-button>
            <el-dialog v-model="dialogVisible" width="400px" title="提示">
                <div class="qrcode-tip">
                    <img src="@/assets/imgs/sys/pay-tip.png" alt="" />
                    <span>请务必确认已完成签约认证</span>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="baofuConfirmHandler">确认提交</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import request from '@/request';
import storage from '@/commons/storage';
const emit = defineEmits(['submit']);
const entObj = ref(storage.get('ZW-TENANT-LOGINNO'));
const dialogVisible = ref(false);
const qrcode = ref('');
const status = ref(3);

/**
 * 初始化获取二维码
 */
const getQrcodeUrl = async () => {
    const { data } = await request('baofuQrcode');
    data.url && (qrcode.value = data.url);
};
getQrcodeUrl();

const submitHandler = () => {};

/**
 * 认证完成点击
 */
const confirmHandler = () => {
    dialogVisible.value = true;
};
/**
 * 宝付签约认证
 */
const baofuConfirmHandler = async () => {
    await request('baofuConfirm', {
        loginNo: entObj.value.loginNo
    });
    dialogVisible.value = false;
    emit('submit');
};
</script>
<style lang="scss" scoped>
@import './style.scss';
.cm-bg-c :deep(.el-dialog) {
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
        0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    margin: 0;
}
.cm-bg-c :deep(.el-dialog__header) {
    padding-top: 20px;
    padding-bottom: 20px;
}
.cm-bg-c :deep(.el-dialog__body) {
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    padding-top: 50px;
    padding-bottom: 42px;
}
.cm-bg-c :deep(.el-dialog__footer) {
    padding: 14px 24px 14px 0;
}
.updoc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

    .tip-img {
        width: 80px;
        height: 80px;
    }

    .tip-status {
        height: 20px;
        font-size: 20px;
        font-weight: 500;
        color: #ff6b00;
        margin-top: 16px;
    }

    .tip-text {
        margin-top: 40px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 300;
        color: #33302d;

        .err-info {
            color: #4a90e2;
        }
    }
}

.updoc-success {
    padding-bottom: 8px;
}
.updoc-success :deep(.el-descriptions__body) {
    background-color: #f9f9f9;
}

.updoc-success :deep(.el-descriptions__label:not(.is-bordered-label)) {
    margin-right: 0;
}
.updoc-success .cell-special {
    color: #ff6b00;
}

.qrcode-wrapper {
    padding: 25px 25px 16px;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 276px;
    height: 305px;
    box-sizing: border-box;
    margin-bottom: 24px;
    img {
        width: 226px;
        height: 226px;
        margin-bottom: 24px;
    }
    p {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        line-height: 14px;
        margin: 0;
    }
}

.qrcode-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }
    span {
        font-size: 14px;
        font-weight: 400;
        color: #33302d;
        line-height: 16px;
    }
}

.el-popper.updoc-popper {
    .ul {
        display: flex;
        flex-direction: column;

        .li {
            line-height: 19px;
            font-size: 14px;
            font-weight: 300;
            color: #33302d;
        }
    }
}
</style>
